<template>
    <div>
        <h1>会员列表</h1>
        会员名称:<input type="text" v-model="info.membername" /> 
        会员等级:<select v-model="info.memberLevelname">
        <option value="">请选择</option>
        <option :value="item.LevelName" v-for="item in list1">{{ item.LevelName }}</option>
      </select>
      <input
        type="button"
        value="查询"
        class="btn btn-primary"
        @click="getMemberList"
      />
      <input type="button" value="批量删除" class="btn btn-danger" @click="delall">
        <table class="table table-bordered">
            <thead>
                <tr class="bg-primary">
                    <td>
                        <input type="checkbox" v-model="checked" @click="Checkall">
                    </td>
                    <td>ID</td>
                    <td>卡号</td>
                    <td>手机号</td>
                    <td>会员名称</td>
                    <td>会员等级</td>
                    <td>生日</td>
                    <td>性别</td>
                    <td>积分</td>
                    <td>最低消费</td>
                    <td>爱好</td>
                    <td>简介</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list":key="item.Memberid">
                    <td>
                        <input type="checkbox" v-model="sid" :value="item.Memberid" @change="checkone">
                    </td>
                    <td>{{item.Memberid}}</td>
                    <td>{{item.Cardid}}</td>
                    <td>
                        {{item.Phone.substring(0, 3) + '****' + item.Phone.substring(7) }}
                    </td>
                    <td>{{item.Names}}</td>
                    <td>{{item.MemberLevel}}</td>
                    <td>{{ moment(item.Birthday).format('YYYY-MM-DD')}}</td>
                    <td>{{item.Sex==1?'男':'女'}}</td>
                    <td>{{item.JFnumber}}</td>
                    <td style="color:red">¥{{item.MinMoney.toFixed(2)}}</td>
                    <td>{{item.Likes}}</td>
                    <td>{{item.Desc}}</td>
                    <td>
                        <input type="button" value="修改" class="btn btn-success" @click="update(item.Memberid)"/>
                        <input type="button" value="删除" class="btn btn-danger" @click="del(item.Memberid)"/>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted}from 'vue';
import axios from 'axios';
import moment from 'moment';
//跳转
import {useRouter} from 'vue-router';
const router=useRouter();

let info:any=reactive({
    membername:'',
    memberLevelname:'',
})
//声明一个变量接受收端返回的数据
let list: any = ref([]);
let list1: any = ref([]);
//就绪函数
onMounted(()=>{
    show();
    getMemberList();
})

//获取等级列表
const show=()=>{
    axios.get('https://localhost:7193/api/Member/GetMemberLevelList').then(res=>{
        debugger
        res.data;
        list1.value=res.data;
    })
}
//===============全选/反选===============
let checked:any=ref(false);

let sid:any=ref([]);
//全选
const Checkall=()=>{
    checked.value=!checked.value;
    if(checked.value==true){
        sid.value=list.value.map((item:any)=>{
            return item.Memberid;
        })
    }
    else{
        sid.value=[];
    }
}

//反选
const checkone=()=>{
    if(sid.value.length==list.value.length){
        checked.value=true;
    }
    else{
        checked.value=false;
    }
}
//=======================================
//获取会员列表数据
const getMemberList=()=>{
    axios({
        url:'https://localhost:7193/api/Member/GetMemberModellist',
        method:'get',
        params:info,
    })
    .then((res)=>{
        console.log(res.data);
        list.value=res.data;
    })
    .catch((err)=>{
        console.log(err);
    })
}
//删除
const del =(Memberid:any)=>{
    if(confirm('确认删除吗')==true){
        axios({
            url:'https://localhost:7193/api/Member/DelMember',
            method:'delete',
            params:{
                Memberid:Memberid
            }
        })
        .then((res)=>{
            console.log(res.data);
            if(res.data>0){
                alert('删除成功');
                getMemberList();
            }
            else{
                alert('删除失败');
            }
        })

    }
}
//反填
const update=(Memberid:any)=>{
    router.push({
        path:'/memberupdates',//路径名
        query:{Memberid:Memberid}

    })//路径名
}
//====================批量删除===================
const delall=()=>{
    if(confirm('确认删除吗?')){
        axios({
            url:'https://localhost:7193/api/Member/DelallMember',
            method:'delete',
            params:{
                id:sid.value.toString(),
            }
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert('删除成功');
                getMemberList();

            }
            else{
                alert('删除失败');
            }
        })
    }
}
//=====================================================
</script>

<style scoped>
input{
    margin: 0 10px;
}
</style>